I have written a script in html for a "Terminal".
<html>
<head>
<title>Nonscript</title>
<div id="htmlterminal">
<center>
<pre>
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|H|T|M|L| |T|E|R|M|I|N|A|L| |M|A|D|E| |B|Y| |M|A|X|
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
</pre>
</center>
</div>
<style>
#htmlterminal {
background: red;
background: -webkit-linear-gradient(left, orange, yellow, green, cyan, blue, violet);
background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 3vw;
}
#htmlterminal
</style>
</head>
<body style="background-color:Black;">
<p id="welcome" , style="color:white">Hello welcome to the HTML Terminal, for a list of commands type "help".</p>
<center>
<form class="pure-form">
<input id="command_prompt" type="text" placeholder="Enter command" />
<button type="submit">Run<i class="fa fa-chevron-circle-right"></i></button>
</form>
</center>
<p id="return" , style="color:white"></p>
<script>
var commandPrompt = document.getElementById('command_prompt');
document.querySelector('form.pure-form').addEventListener('submit', function(e) {
e.preventDefault();
document.getElementById("return").innerHTML = "Executing: " + commandPrompt.value;
});
</script>
</body>
</html>
And I have tried using if to check for input but it dosent seem to be working, here is my code:
if commandPrompt.value = "help" {
document.getElementById("return").innerHTML = "Some more commands come here"
}
else{
return null
}
I have browsed the web but I still havent found anything, may I get some help?,
Thanks, Blitzel
Hope the following might shine a light on how to proceed! When assigning a value you use a single = but to check equality you use == or, for strict equality ===
The clicking of the button is, I believe the trigger to run/test the command entered so add a click event handler to that button and from there process the value entered into the text field.
let cmd=document.getElementById('command_prompt');
let output=document.getElementById("return");
let bttn = document.querySelector('button[type="submit"]').addEventListener('click', function(e) {
e.preventDefault();
let value;
switch( cmd.value ){
case 'help':
value='Some more commands come here';
break;
case 'panic':
value='Other text/cmds';
break;
default:
value='The command: "' + cmd.value + '" has not been defined';
break;
}
output.innerHTML=value;
})#htmlterminal {
background: red;
background: -webkit-linear-gradient(left, orange, yellow, green, cyan, blue, violet);
background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 3vw;
}<div id="htmlterminal">
<center>
<pre>
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|H|T|M|L| |T|E|R|M|I|N|A|L| |M|A|D|E| |B|Y| |M|A|X|
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
</pre>
</center>
</div>
<p id="welcome">Hello welcome to the HTML Terminal, for a list of commands type "help".</p>
<center>
<form class="pure-form">
<input id="command_prompt" type="text" placeholder="Enter command" />
<button type="submit">Run<i class="fa fa-chevron-circle-right"></i></button>
</form>
</center>
<p id="return" style="color:red"></p>